<template>
	<div class="table1">
		<div class="flexr ihead">
			<div>{{Lang.table[lang][0]}}</div>
			<div>{{Lang.table[lang][1]}}</div>
			<div>{{Lang.table[lang][2]}}</div>
			<div>{{Lang.table[lang][3]}}</div>
		</div>
		<div class="ibody">
			<div
				class="flexr ibodylist"
				v-for="(v,i) in record"
				:key="i"
			>
				<div v-text="v.coinName"/>
				<div v-text="v.price"/>
				<div class="codeType" v-text="v.amount"/>
				<div class="codeType" v-text="v.createTime"/>
			</div>
			<div class="noInfo" v-if="record.length == 0">
				<span>{{Lang.table[lang][4]}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import {vpost, imgpost, kpost, vlink, klink} from '@api'
	import eventsVue from '../events'
	import Lang from '../lang'
	export default {
		name: 'table1',
		data() {
			return {
				record: [],
				Lang,
			}
		},

		components: {},

		computed: {
			lang() {
				return this.$store.state.setting.lang
			},
		},

		methods: {
			/**
			 * @Description: ${获取认购记录}
			 * @Param
			 * @Return
			 * @Author 焦政
			 * @Date 2018/12/12
			 * @Version 1.0
			 */
			getRenGouList() {
				vpost(vlink.subscriptionCenter.getSubscriptionInfo).then(re => {
					this.record = re.dealRgLog
				})
			},
		},

		mounted() {
			if (this.$store.state.user.signed) {
				this.getRenGouList()
			}
			eventsVue.$on('dobuy', re => {
				if (re) {
					this.getRenGouList()
				}
			})
		},
	}
</script>

<style scoped>
	.table1 {
		width: 100%;
		height: 40vh;
		background-color: #181b2a;
		overflow: auto;
	}

	/* 页面表格样式 */
	.flexr {
		display: flex;
		justify-content: space-between;
	}

	.flexr {
		flex-direction: row;
		color: #fff;
	}

	.ihead {
		text-align: center;
		line-height: 50px;
		/* padding: 10px 4%; */
		background-color: #112539;
		height: 50px;
		color: #00c3df;
		margin-bottom: 2px;
	}

	.ihead > div,
	.ibody,
	.ibody > div > div {
		flex: 1;
	}

	.ibody {
		overflow: auto;
		line-height: 20px;
		font-size: 12px;
		flex: 1;
	}

	.ibody > div > div {
		text-align: center;
		height: 50px;
		line-height: 50px;
		background-color: #112539;
		color: #aeb2b6;
	}

	.ibodylist > div {
		margin-bottom: 2px;
	}

	.noInfo {
		width: 100%;
		height: 50px;
		background-color: #112539;
		color: #aeb2b6;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
	}
</style>
